
<template>
    <div class="login">
        <div class="login-img"></div>
        <div class="login-content">
            <img
                class="login-logo text-center"
                src="@/assets/images/login/loginLogo.png"
                alt="云协同中心服务台"
            />
            <div class="login-form">

                <el-input
                    ref="phoneInput"
                    v-model="signInPhone"
                    placeholder="用户名"
                ></el-input>

                <el-input
                    v-model="signInPassword"
                    type="password"
                    placeholder="密码"
                    autocomplete="new-password"
                ></el-input>

                <SliderVerify
                    v-if="isShowSlider"
                    @onSuccess="closeSlider"
                />

                <el-button
                    class="login-btn"
                    @click="signIn"
                >登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import checkType from "@/utils/check.js";
import SliderVerify from "./components/sliderVerify.vue";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations } = createNamespacedHelpers("user");

export default {
    name: "login",
    components: {
        SliderVerify
    },
    computed: {},
    data: () => ({
        activeName: "signInTabName",
        signInTabName: "signInTabName",
        signUpTabName: "signUpTabName",
        signInPhone: "",
        signInPassword: "",
        signUpPhone: "",
        signUpPassword: "",
        signUpPasswordConfirm: "",
        sliderValue: 0,
        isShowSlider: true,
        isVerifyPass: false
    }),
    created() {
        if (process.env.NODE_ENV === "development") {
            this.isShowSlider = false;
            this.isVerifyPass = true;
        }
        sessionStorage.removeItem("NOT_FIRST_LOGIN");
    },
    mounted() {
        this.$refs.phoneInput && this.$refs.phoneInput.focus();
        window.addEventListener("keydown", this.listenerKeydown, false);
    },
    beforeDestroy() {
        window.removeEventListener("keydown", this.listenerKeydown, false);
    },
    watch: {},
    methods: {
        ...mapMutations(["SET_SESSIONID"]),
        listenerKeydown(event) {
            var e =
                event || window.event || arguments.callee.caller.arguments[0];
            switch (e.keyCode) {
                case 13:
                    this.signIn();
            }
        },
        checkPhone(phone) {
            if (!phone) {
                //!checkType(phone, "phone")
                this.$message({
                    showClose: true,
                    message: "请输入用户名",
                    type: "warning"
                });
                return false;
            }
            return true;
        },
        checkPassword(password) {
            if (!checkType(password, "password")) {
                this.$message({
                    showClose: true,
                    message: "请输入6-20位的正确密码",
                    type: "warning"
                });
                return false;
            }
            return true;
        },
        signIn() {
            // 校验提示
            if (!this.checkPhone(this.signInPhone)) return;
            if (!this.checkPassword(this.signInPassword)) return;
            if (!this.isVerifyPass) {
                this.$message({
                    showClose: true,
                    message: "请先通过滑动验证",
                    type: "warning"
                });
                return;
            }
            // 登录
            this.api
                .signIn({
                    username: this.signInPhone,
                    password: this.signInPassword
                })
                .then(res => {
                    let sessionId = res.data;
                    this.SET_SESSIONID(sessionId);
                    this.$router.push("/main");
                })
                .catch(err => {});
        },
        signUp() {
            // 校验提示
            if (!this.checkPhone(this.signUpPhone)) return;
            if (!this.checkPassword(this.signUpPassword)) return;
            if (!this.checkPassword(this.signUpPasswordConfirm)) return;
            if (this.signUpPassword !== this.signUpPasswordConfirm) {
                this.$message({
                    showClose: true,
                    message: "两次输入的密码不一致",
                    type: "warning"
                });
            }
            // 注册
            this.api
                .signIn({})
                .then(res => {
                    this.memberList = res.data;
                })
                .catch(err => {});
        },
        closeSlider() {
            this.isVerifyPass = true;
            setTimeout(() => {
                this.isShowSlider = false;
            }, 2000);
        }
    }
};
</script>

<style lang="scss" src="../../assets/styles/login/index.scss"></style>